<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>日常监管-经营报表页</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<jsp:include page="/scripts/common/index.html"></jsp:include>
<jsp:include page="/scripts/jquery/index.html"></jsp:include>
<jsp:include page="/scripts/dhtmlx/index.html"></jsp:include>
<jsp:include page="/scripts/bootstrap/index.html"></jsp:include>
<link rel="stylesheet" href="${basePath }style/default.css">
<style>
    h1,h2,h3 {
      text-align: center;
      font-size:18px;
    }
    .table1 {
      width: 100%;
     
      border-radius: 0 0 5px 5px;
      padding-bottom: 50px
    }
    .table1 table tr td, .Table1 table tr th {
      
      height: 26px;
    }
    .table1 table tr th {
       background:#0099cc;
       color:#fff
    }

  *{
		margin: 0;
		padding: 0
	}
		.top,.middle{
			
			float: left;
			height: 50px;
			padding: 5px 10px;
			margin:10px auto 0 auto;		
		}
		.middle {
		width:auto;}
		.top span, .middle{
			font-size: 12px;
		}
		.top input {
			display: inline;
			width:160px;
			background-color:#fff !important;
			cursor: pointer;
		}
		.content{
			width: 490px;
			height: 470px;
			padding: 10px 10px;
			margin:0 auto;
			border: 1px solid #ccc;
			border-top: none;
			border-radius: 0 0 5px 5px;

		}


		button {
			background-color:#0099CC;
			border:none;
			border-radius: 4px;
			width: 60px;
			height: 25px;
			color:#ffffff;
			margin-left:12px;
			font-size: 12px;
			-webkit-transition: all .3s ease-in;
			border:1px solid #fff;
		}
		button:hover {
			border:1px solid #0099CC;
			color: #0099CC;
			background-color: #fff;
		}
		select {
			height: 28px;
			font-size: 14px;
		}
		td {
			padding:0 6px
		}
		br {
			clear: both;
		}
		#header {
			width: 100%;
			border-bottom:1px solid #ccc;
			border-radius: 5px 5px 0 0;
			padding-left:10%
		}
		.td1{
		text-align: left;
		}
		.td2{
		text-align: center;
		}
		.td3{
		text-align: right;
		}
</style>
	<script type="text/javascript">
	var timestart="";
	var timeend="";
	function init() {
		//请求表格数据
		query();
		//添加年月
		var myCalendar = new dhtmlXCalendarObject({input:"vacationStartDate",button:"calendar_icon"});
		myCalendar.loadUserLanguage("zh");
		myCalendar.setDateFormat("%Y-%m");
		var myCalendar1 = new dhtmlXCalendarObject({input:"vacationStartDate1",button:"calendar_icon"});
		myCalendar1.loadUserLanguage("zh");
		myCalendar1.setDateFormat("%Y-%m");
	}
	//查询加载数据
	function query() {
		var v =  {};//
		var time= "";
		v["map.StartTime"] = $("#vacationStartDate1").val();//将选择的时间传入后台
		v["map.EndTime"] = timeend;//将选择的时间传入后台
		
		$('#MyForm').bootstrapValidator('validate');
			$.ajax({
				type : 'POST' ,
				url : 'page/bi/rcjg/getjysinfo',
				data : v ,
				dataType : "json",
				async : true ,
				cache : false ,
				jsonpCallback : "null" ,
				success : function(response, status, statusText) {
					
						
						var table="";
						var row="";
						var tablecontent=response.content;
						console.log(tablecontent[0]);
						var ss="<tr>"
					        +"<th colspan='2' style='text-align: center;'>项目</th>"
					        +"<th style='text-align: center;'>计量单位</th>"
					        +"<th style='text-align: center;'>销售环节</th>"
					        +"<th style='text-align: center;'>餐饮服务环节</th>"
					        +"<th style='text-align: center;'>合计</th>"
					        +"</tr>";
						for(i=0;i<tablecontent.length;i++){
							if(tablecontent[i].XMNAME==undefined||tablecontent[i].XMNAME==""){
								
							}else{
							var sss="<tr>";
							if(i<10){
								sss+="<td colspan='2'>"+tablecontent[i].XMNAME+"</td>";
							}else if(i==tablecontent.length-3&&tablecontent.length>=13){
								sss+="<td rowspan='3' style='width:70px;text-align: center;'>其中</td>";
								sss+="<td >"+tablecontent[i].XMNAME+"</td>";
							}else{
								sss+="<td >"+tablecontent[i].XMNAME+"</td>";
							}
							sss+="<td class='td2'>"+tablecontent[i].JLDW+"</td>";
							var XS="";
							var CY="";
							if(tablecontent[i].XS==null||tablecontent[i].XS=="undefined"){
								sss+="<td class='td3'>0</td>";
								XS=0;
							}else{
								sss+="<td class='td3'>"+tablecontent[i].XS+"</td>";
								XS=tablecontent[i].XS;
							}
							if(tablecontent[i].CY==null||tablecontent[i].CY=="undefined"){
								sss+="<td class='td3'>0</td>";
								CY=0;
							}else{
								sss+="<td class='td3'>"+tablecontent[i].CY+"</td>";
								CY=tablecontent[i].CY;
							}
							
							
							var hj = parseInt(XS)+parseInt(CY);
							sss+="<td class='td3'>"+hj+"</td>";
							ss=ss+sss+"</tr>";
							}
						}
						if(tablecontent.length<13){
							ss=ss+"<tr><td rowspan='3' style='width:70px;text-align: center;'>其中</td><td>良好</td><td class='td2'>户</td><td class='td3'>0</td><td class='td3'>0</td><td class='td3'>0</td></tr>" 
							+"<tr><td>优秀</td><td class='td2'>户</td><td class='td3'>0</td><td class='td3'>0</td><td class='td3'>0</td></tr> "
							+"<tr><td>一般</td><td class='td2'>户</td><td class='td3'>0</td><td class='td3'>0</td><td class='td3'>0</td></tr>";
						}
					$("#tables3").html(ss);
				} ,
				error : function(response, status, statusText) {
				} ,
				complete : function(response, status, statusText) {
				}
			});
		
	}
	//查询覆盖率
	function querys() {
		var v =  {};//
		var time= "";
		v["map.time"] = time;//将选择的时间传入后台
		
		$('#MyForm').bootstrapValidator('validate');
			$.ajax({
				type : 'POST' ,
				url : 'page/bi/rcjg/getjyinfo',
				data : v ,
				dataType : "json",
				async : true ,
				cache : false ,
				jsonpCallback : "null" ,
				success : function(response, status, statusText) {
					
						
						var table="";
						var row="";
						var tablecontent=response.content;
						console.log(tablecontent[0]);
						var ss="<tr>"
					        +"<th  style='text-align: center;'>区域</th>"
					        +"<th >服务经营提供者数</th>"
					        +"<th >检查覆盖数</th>"
					        +"<th >覆盖率</th>"
					        +"</tr>";
						for(i=0;i<tablecontent.length;i++){
							var sss="<tr>";
							sss+="<td>"+tablecontent[i].区域+"</td>";
							sss+="<td >"+tablecontent[i].服务经营提供者数+"</td>";
							sss+="<td>"+tablecontent[i].检查覆盖数+"</td>";
							sss+="<td>"+decimal(tablecontent[i].检查覆盖数/tablecontent[i].服务经营提供者数*100,2)+"%</td>";
							ss=ss+sss+"</tr>";
						}
						$("#tables3").html(ss);
				} ,
				error : function(response, status, statusText) {
				} ,
				complete : function(response, status, statusText) {
				}
			});
		
	}
	//对多位小数进行四舍五入
	//num是要处理的数字  v为要保留的小数位数
	function decimal(num,v){
	var vv = Math.pow(10,v);
	return Math.round(num*vv)/vv;
	}
	
	function clearData(){
		
		var arr = ["vacationStartDate","vacationStartDate1"];
		for(key in arr){
			$("#"+arr[key]+"").val("")
		}
		query();
	}
	</script>
  </head>
  
  <body onload="init()" style="margin: 0;" margin-top="0">
    <div style="display: flex">
        <div id="tables" style="overflow:auto;width:auto;flex: 1;">
     <div id="header">
	<div class="top">
		<!-- <span>统计时间:&nbsp;&nbsp;从</span>
		<input type="text" id="vacationStartDate" class="form-control" readonly="true" /> -->
		<span>&nbsp;&nbsp;时间范围：&nbsp;&nbsp;</span>
		<input type="text" id="vacationStartDate1" class="form-control" readonly="true" />
	</div>
	<div class="middle">
		
		<button onclick="query()">查询</button>
		<button onclick="clearData()">清空</button>
		<!-- 
		<button>清空</button>
		-->
	</div>
	<br>
	</div>
    <div id="Table2" class="table1" >
    
      <h1 style="margin: 24px 0">日常监管经营情况</h1>
    <table border="1" id="tables3" bordercolor="#ccc" width="80%" border-collapse="cellspacing" cellspacing="0" align='center' style="margin: 0 auto">
     
          
    </table>
    <br/><br/><br/>
    </div>
    </div>
    </div>
  </body>
</html>
